import React, { forwardRef } from "react";
import {
  Form,
  Input,
  Button,
  Radio,
  Select,
  TimePicker,
  DatePicker,
  Space,
} from "antd";
import './index.less'

interface FormGeneratorProps {
  config: FormConfigItem[];
  onFinish: (values: any) => void;
  onReset?: () => void;
  values?: any; // 新增的 values 属性
  isDialog?: boolean;
  confirmText?: string;
  resetText?: string;
  ref: any;
  children?: React.ReactNode;
}
const SearchForm: React.FC<FormGeneratorProps> = forwardRef(
  (
    {
      config,
      onFinish,
      onReset,
      values,
      isDialog = true,
      confirmText = "查询",
      resetText = "重置",
      children
    },
    ref
  ) => {
    const [form] = Form.useForm();
    // 如果提供了 values，则设置表单的值
    if (values) {
      form.setFieldsValue(values);
    }
    const renderFormItem = (item: FormConfigItem) => {
      switch (item.type) {
        case "input":
          return <Input disabled={item.disabled} placeholder={item.placeholder} />;
        case "radio":
          return (
            <Radio.Group disabled={item.disabled}>
              {item.options?.map((option) => (
                <Radio key={option.value} value={option.value}>
                  {option.label}
                </Radio>
              ))}
            </Radio.Group>
          );
        case "select":
          return (
            <Select disabled={item.disabled} placeholder={item.placeholder}>
              {item.options?.map((option) => (
                <Select.Option key={option.value} value={option.value}>
                  {option.label}
                </Select.Option>
              ))}
            </Select>
          );
        case "time":
          return <TimePicker disabled={item.disabled} placeholder={item.placeholder} />;
        case "date":
          return <DatePicker disabled={item.disabled} placeholder={item.placeholder} />;
        case "dateRange":
          return (
            <DatePicker.RangePicker
                disabled={item.disabled} 
              picker={item.picker && "quarter"}
              defaultValue={item.defaultValue}
              format={item.format}
              disabledDate={item.disabledDate}
            />
          );
        case "dateTimeRange":
          return (
            <DatePicker.RangePicker
              disabled={item.disabled}
              showTime
              defaultValue={item.defaultValue}
              format={item.format}
              disabledDate={item.disabledDate}
            />
          );
        default:
          return <Input disabled={item.disabled} placeholder={item.placeholder}/>;
      }
    };

    const handleReset = () => {
      form.resetFields();
      if (onReset) {
        onReset(); // 如果提供了 onReset 函数，则调用它
      }
    };

    return (
      <Form className="layout_form" ref={ref} form={form} onFinish={onFinish} layout={'vertical'} onReset={handleReset}>
        {config.map((item) => (
          <Form.Item key={item.name} rules={item.rules} label={item.label} tooltip={item.tooltip} name={item.name}>
            {renderFormItem(item)}
          </Form.Item>
        ))}
        {children}
        {isDialog && (
          <Form.Item style={{ width: "160px" }}>
            <Space>
                <Button type="primary" htmlType="submit">
                {confirmText}
                </Button>
                <Button htmlType="reset">{resetText}</Button>
            </Space>
          </Form.Item>
        )}
      </Form>
    );
  }
);

export default SearchForm;
